<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>登录</title>
<%@ include file="head.jsp" %>
<script type="text/javascript">
	$(function() {
		$('#login').dialog({
			title : '登录',
			width : 350,
			height : 300,
			closed : false,
			cache : false,
			modal : true,
			iconCls : 'icon-ok',
			buttons : [ {
				text : '登 录',
				handler : function() {
					//登录代码
					//先验证,通过后提交表单
					if($('#login_form').form('validate')){
						//对验证码进行验证
						if(captchcaValidate()){
							//普通的表单提交，刷新整个页面
							$('#login_form').submit();
						}	
					}
				}
			}, {
				text : '取 消',
				handler : function() {
					//关闭对话框代码
					$('#login').dialog('close');
				}
			} ]
		});
		//定义验证码键盘输入事件
		$('#captchca').keyup(function(){
			  if($(this).val().length<4){
				  $('#login_tip').html('<p style="color: red;">验证码错误</p>');
			  }else{
				  captchcaValidate(); 
			  }
		});
	});
	//验证码验证
	function captchcaValidate(){
		//定义验证结果
		var flag = false;
		//获取验证码
		var captchca = $("#captchca").val();
		//ajax验证,请注意这是回调方法,默认是异步执行，这里改成同步
		$.ajax({
			   type: "POST",
			   url: "captchca/validate",
			   data: "captchca="+captchca,
			   async:false,
			   success: function(msg){
				   if(msg=="success"){
					   flag = true;
					   $('#login_tip').html('<p style="color: green;">验证码正确</p>');
				   }else{
					   $('#login_tip').html('<p style="color: red;">验证码错误</p>');
				   }
			   }
		});
		return flag;
	}
</script>
</head>
<body>
	<div id="login">
		<!-- 验证消息提示框 -->
		<div id="login_tip" class="p5">
			<!-- 服务器端验证用户名和密码验证规则提示框 -->
			<c:if test="${errors!=null }">
				<c:forEach items="${errors}" var="error">
					<p style="color: red;">${error.defaultMessage}</p>
				</c:forEach>
			</c:if>
			<!-- 服务器端验证用户名和密码是否存在提示 login_error-->
			<c:if test="${login_error!=null }">
				<p style="color: red;">${login_error}</p>
			</c:if>
			<!-- 服务器端验证码错误提示 captchca_error-->
			<c:if test="${captchca_error!=null }">
				<p style="color: red;">${captchca_error}</p>
			</c:if>
		</div>
		<form id="login_form" method="post" class="p15">
			<div class="h30 lh28">
				<label for="usercode">用户名：</label> <input class="easyui-validatebox"
					type="text" name="usercode" data-options="required:true,missingMessage:'用户名不能为空'" />
			</div>
			<div class="h30 lh28">
				<label for="userpassword">密&nbsp;码：</label> <input class="easyui-validatebox"
					type="text" name="userpassword" data-options="required:true,missingMessage:'密码不能为空'" />
			</div>
			<div class="h30 lh28">
				<label for="captchca">验证码：</label> <input id="captchca" class="easyui-validatebox"
					type="text" name="captchca" data-options="required:true,missingMessage:'验证码不能为空'" />
					<img alt="点我换一张" src="captchca/get" title="点我换一张" onclick="this.src='captchca/get?'+Math.random()">
			</div>
		</form>
	</div>
</body>
</html>